@IOS7_BAR_HEIGHT: 7px;
@IOS7_BACKGROUND_WIDTH: 90%;

@IOS7_PROGRESSBAR_INTERDETERMINATE_STATE_GRADIENT: left, transparent 5%, @IOS7_PROGRESSBAR_INTERDETERMINATE_STATE_COLOR, transparent 95%;
@IOS7_PROGRESSBAR_DISABLED_STATE_INTERDETERMINATE_STATE_GRADIENT: left, transparent 5%, @IOS7_PROGRESSBAR_DISABLED_STATE_RANGE_COLOR, transparent 95%;

.dx-progressbar-range-container, .dx-progressbar-animating-container {
    border-radius: @IOS7_BAR_HEIGHT;
    overflow: hidden;
}

.dx-progressbar-container {
    height: @IOS7_BAR_HEIGHT;
    background-color: @IOS7_PROGRESSBAR_CONTAINER_COLOR;
    border: 1px solid @IOS7_PROGRESSBAR_BORDER_COLOR;
}

.dx-progressbar-range {
    height: @IOS7_BAR_HEIGHT;
    top: -1px;
    position: relative;
    background-color: @IOS7_PROGRESSBAR_RANGE_COLOR;
}

.dx-progressbar-status {
    top: 1px;
}

.dx-progressbar-animating-container {
    height: @IOS7_BAR_HEIGHT;
    background-color: @IOS7_PROGRESSBAR_RANGE_COLOR;
    background-size: @IOS7_BACKGROUND_WIDTH @IOS7_BAR_HEIGHT;
    .animation(loader 2s linear infinite);
    .gradient-linear(@IOS7_PROGRESSBAR_INTERDETERMINATE_STATE_GRADIENT);
    background-repeat: repeat;
}

.dx-state-disabled {
    &.dx-progressbar {
        opacity: 1;
    }

    .dx-progressbar-range {
        background-color: @IOS7_PROGRESSBAR_DISABLED_STATE_RANGE_COLOR;
    }

    .dx-progressbar-animating-container {
        .animation(none);
        .gradient-linear(@IOS7_PROGRESSBAR_DISABLED_STATE_INTERDETERMINATE_STATE_GRADIENT);
        background-repeat: repeat;
        background-color: @IOS7_PROGRESSBAR_CONTAINER_COLOR;
        background-position-x: @IOS7_BACKGROUND_WIDTH / 2;
    }
}

.dx-rtl {
    .dx-progressbar, &.dx-progressbar {
        .dx-progressbar-animating-container {
            .animation(loader-rtl 1s linear infinite);
            .gradient-linear(@IOS7_PROGRESSBAR_INTERDETERMINATE_STATE_GRADIENT);
            background-repeat: repeat;
        }
    }
}

@-webkit-keyframes loader {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: 900%;
    }
}

@-moz-keyframes loader {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: 900%;
    }
}

@keyframes loader {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: 900%;
    }
}

@-ms-keyframes loader {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: 900%;
    }
}

@-webkit-keyframes loader-rtl {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: -900%;
    }
}

@-moz-keyframes loader-rtl {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: -900%;
    }
}

@keyframes loader-rtl {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: -900%;
    }
}

@-ms-keyframes loader-rtl {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: -900%;
    }
}
